<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css-脱离文档流</title>
    <style>
        .father {
            /* height: 300px; */
            background-color: greenyellow;
            border: 3px dashed red;
            /* 清除浮动 方式1 */
            overflow: hidden;
        }

        /* 清除浮动方式2 */
        /* .father::after {
            content: '';
            display: block;
            clear: both
        } */

        .son-left {
            background-color: aqua;
            height: 50px;
            width: 50px;
            float: left
        }

        .son-right {
            background-color: yellow;
            height: 100px;
            width: 100px;
            float: right
        }

        .son-right2 {
            background-color: rgba(255, 0, 119, 0.085);
            height: 150px;
            width: 150px;
            float: right
        }
    </style>
</head>

<body>

    <!-- 网页布局方式有以下五种:
   1 标准流(普通流、文档流):网页按照元素的书写顺序依次排列
   2 浮动
   3 定位
   4 `Flexbox`
   5 `Grid`(自适应布局)
   标准流·是由块级元素和行内元素按照默认规定的方式来排列，
    块级就是占一行，行内元素一行放好多个元素。 -->

    <!-- 元素脱离文档流，根据开发者的漂浮到网页的任意方向， -->
    <!-- 浮动·属性用于创建浮动框，将其移动到一边，
    直到左边缘或右边缘触及包含块或另一个浮动框的边缘，
    这样即可使得元素进行浮动。
    语法:
    选择器{
    float: left/right/none;
    }
    注意:浮动是相对于父元素浮动，只会在父元素的内部移动 -->

    <!-- 脱标:脱离标准流。
    一行显示，顶部对齐 -->

    <div class="father">
        <div class="son-left">1</div>
        <div class="son-right">2</div>
        <div class="son-right2">22</div>
        <p> 我是一段文章。。。。。。</p>
    </div>

    <p> 我是一段文章。。。。。。</p>

</body>

</html>